﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href="@Url.Content("~/lib/bootstrap/css/bootstrap.min.css")" rel="stylesheet">
    <link href="@Url.Content("~/lib/font-awesome/css/font-awesome.min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/css/AdminLTE.min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/css/skins/skin-blue.css")" rel="stylesheet">

    <style>
        .login-box-body {
            position: relative;
            border-radius: 5px;
            /*padding:20px 20px 80px 20px;*/
        }

        .login-box-msg {
            font-size: 16px;
            color: #323232;
        }

        .login-logo {
            margin-bottom: 10px;
        }

            .login-logo a .img-box {
                display: block;
                width: 100%;
            }

                .login-logo a .img-box img {
                    display: block;
                    width: 100%;
                    height: auto;
                }

        .clearfix::before, .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .error-box {
            /*position: absolute;
            bottom: 10px;
            left: 0px;*/
            width: 100%;
            margin-top: 10px;
        }

        .error-box-inner {
            width: 100%;
            border: 1px solid #ffb4a8;
            font-size: 12px;
            color: #6c6c6c;
            background-color: #fef2f2;
            line-height: 1.5;
            padding: 8px 0;
        }

        .error-box .icon {
            float: left;
            font-size: 16px;
            color: #f40;
            padding: 1px 5px 0 4px;
        }

        .error-box .text {
            float: left;
            width: 88%;
            margin: 0;
        }

        .has-feedback .form-control-feedback {
            top: 1px;
        }

        .vercode .vercode-input {
            float: left;
            width: 60%;
        }

        .has-feedback.vercode .form-control-feedback {
            right: 40%;
        }

        .form-group {
            overflow: hidden;
        }

        .vercode-img {
            float: left;
            width: 40%;
            height: 34px;
            overflow: hidden;
        }

            .vercode-img img {
                float: right;
                display: block;
                width: 102px;
                height: 34px;
            }
    </style>
</head>
<body class="hold-transition login-page">
    <div class="login-box">

        <!-- /.login-logo -->
        <div class="login-box-body">
            <!-- /.login-logo -->
            <div class="login-logo">
                <a href="javascript:;">
                    <div class="img-box">
                        <img src="@Url.Content("~/images/logo.png")" alt="斑马车务" />
                    </div>
                </a>
            </div>

            <form action="###" method="POST">
                <div class="form-group has-feedback">
                    <input id="UserName" name="UserName" type="text" class="form-control" placeholder="请输入用户名" autocomplete="off" />
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input id="Password" name="Password" type="password" class="form-control" onkeypress="autoLogin(event);" placeholder="请输入密码" autocomplete="off" />
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback vercode">
                    <div class="vercode-input">
                        <input id="ValidateCode" name="Password" type="text" maxlength="4" onkeypress="autoLogin(event);" class="form-control" placeholder="请输入验证码" autocomplete="off" />
                        <span class="glyphicon glyphicon-sound-dolby form-control-feedback"></span>
                    </div>
                    <div class="vercode-img">
                        <img src="@Url.Action("GetValidateCode","Account")" id="validateCode" onclick="refreshCode();" alt="验证码" />
                    </div>
                </div>
                <div class="row">
                    <!-- /.col -->
                    <div class="col-xs-12">
                        <button type="button" onclick="login();" class="btn btn-primary btn-block btn-flat">登录</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

            <div class="error-box">
                <div id="errMsgBox" style="display:none" class="error-box-inner clearfix">
                    <span class="glyphicon glyphicon-remove icon"></span>
                    <p id="errMsg" class="text"></p>
                </div>
            </div>
        </div>
        <!-- /.login-box-body -->
    </div>

    <script type="text/javascript" src="@Url.Content("~/lib/jquery/jquery.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/lib/bootstrap/js/bootstrap.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/adminlte.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/bmcw.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var msg = "@ViewBag.Msg";
            if (!BMCW.isNullOrEmpty(msg)) {
                BMCW.alert(msg);
            }
        });
        //登陆
        function login() {
            var userName = $("#UserName").val();
            if (BMCW.isNullOrEmpty(userName)) {
                $("#errMsg").html('请输入用户名');
                $("#errMsgBox").show();
                return false;
            }

            var pwd = $("#Password").val();
            if (BMCW.isNullOrEmpty(pwd)) {
                $("#errMsg").html('请输入密码');
                $("#errMsgBox").show();
                return false;
            }

            var vcode = $("#ValidateCode").val();
            if (BMCW.isNullOrEmpty(vcode)) {
                $("#errMsg").html('请输入验证码');
                $("#errMsgBox").show();
                return false;
            }

            BMCW.ajax({
                url: "@Url.Action("Login", "Account")",
                contentType:"application/json; charset=utf-8",
                data: {
                    UserName: userName,
                    Password: BMCW.md5(userName + pwd + "!!!"),
                    ValidateCode: vcode
                },
                type: "POST",
                success: function (rdata) {
                    if (rdata.status == 0) {
                        location.href = "@Url.Action("Index", "Home")";
                    } else {
                        $("#errMsg").html(rdata.message);
                        $("#errMsgBox").show();
                    }
                }
            })
        }

        //验证码刷新
        function refreshCode() {
            $("#validateCode").attr("src", "@Url.Action("GetValidateCode", "Account")?time=" + (new Date()).getTime())
        }

        function autoLogin(e) {
            var keynum;
            if (window.event) // IE
            {
                keynum = e.keyCode
            }
            else if (e.which) // Netscape/Firefox/Opera
            {
                keynum = e.which
            }
            if (keynum == 13) {
                login();
            }
        }
    </script>
</body>
</html>
